<template>
  <div id="artInfo">
    <img class="main-img" src="static/default/banner002.png" alt>
    <div class="containner">
      <Row>
        <Col :md="6" id="left-box">
          <UserBox></UserBox>
          <!-- 特别推荐 -->
          <div class="module">
            <ModelItem :datas="modelList"></ModelItem>
          </div>
        </Col>
        <Col :md="18">
          <div class="module">
            <div id="art-title">{{ artInfo.title }}</div>
            <div id="other-info">
              <span class="other-item">
                <Icon type="ios-brush-outline"/>&nbsp;
                <span v-if="artInfo.nickname">{{ artInfo.nickname }}</span>
                <span v-else>{{ artInfo.username }}</span>
              </span>
              <span class="other-item">
                <Icon type="ios-alarm-outline"/>
                &nbsp;{{ artInfo.create_time|defaultDate }}
              </span>
              <span class="other-item">
                <Icon type="ios-eye-outline"/>
                {{ artInfo.see }}
              </span>
            </div>
            <div id="content" class="ql-container ql-snow">
              <div class="ql-editor" v-html="artInfo.content"></div>
            </div>
            <div id="num-box">
              <span id="collect">收藏</span>
            </div>
          </div>
          <div class="module">
            <div id="commont">
              <div id="mobile-no">
                <div class="c-header">评论区</div>
                <Input
                  id="c-into"
                  type="textarea"
                  v-model="comment"
                  :autosize="{minRows: 2,maxRows: 5}"
                  placeholder="评论一下"
                ></Input>
                <div id="send">
                  <Icon style="cursor: pointer" title="发送" @click="addComment" type="ios-send"/>
                </div>
              </div>
              <div class="c-header">
                <span>最新评论</span>
                <span>{{ artInfo.see }}人查看，{{ count }}条评论</span>
              </div>
              <div class="c-item" v-for="(item,index) in commentArr" :key="index">
                <div class="c-item-header">
                  <div class="item-info">
                    <Avatar v-if="item.src" :src="global.serviceUrl + item.src" size="small"/>
                    <Avatar v-else src="static/default/default.png" size="small"/>
                    <span class="user-name">{{ item.nickname }}</span>
                  </div>
                  <div class="item-date">{{ item.add_time | defaultDate }}</div>
                </div>
                <div class="c-content">{{ item.comment }}</div>
              </div>
              <div id="no-more">
                <span v-show="isMore" @click="getMore">加载更多</span>
                <span v-show="!isMore">没有更多评论了~</span>
              </div>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <FooterView></FooterView>
  </div>
</template>
<script>
import UserBox from "@/components/UserBox";
import ModelItem from "@/components/ModelItem";
import FooterView from "@/components/Footer";
import {
  getInfo,
  getHotList,
  addComments,
  getComments,
  formatDate
} from "@/config/api";
import { mapState } from "vuex";

export default {
  name: "ArtInfo",
  data() {
    return {
      count: 0, //评论总数
      index: 0, //加载索引
      isMore: true, //是否有更多
      comment: "", //评论内容
      artId: "", //文章id
      artInfo: "", //文章内容
      modelList: [], //特别推荐
      commentArr: [] //评论数据
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  components: {
    ModelItem,
    FooterView,
    UserBox
  },
  mounted() {
    if (!this.$route.query.id) {
      this.$router.push({
        path: "/"
      });
    }
    // 获取文章内容
    this.getContent();

    //获取热门文章列表
    getHotList()
      .then(result => {
        this.modelList = result.data;
      })
      .catch(err => {
        throw err;
      });

    //获取评论
    this.getComment();
  },
  filters: {
    defaultDate(val) {
      return formatDate(val);
    }
  },
  methods: {
    getContent() {
      const id = this.$route.query.id;
      this.artId = id; //获取文章id
      getInfo(id)
        .then(result => {
          this.artInfo = result.data[0];
        })
        .catch(err => {
          throw err;
        });
    },
    //添加评论
    addComment() {
      if (!this.userInfo.id) {
        this.$Message.warning("请先登录！");
      } else if (this.comment == "") {
        this.$Message.warning("评论内容不能为空！");
      } else
        addComments(this.comment, this.artId, this.userInfo.id)
          .then(result => {
            if (result.data.affectedRows == "1") {
              this.start();
              this.$Message.success("评论成功！");
            } else {
              this.$Message.error("评论失败！");
            }
          })
          .catch(err => {
            this.$Message.error("评论失败！");
            throw err;
          });
    },
    //初始化状态
    start() {
      //清空，重新请求评论列表
      this.comment = "";
      this.commentArr = [];
      this.index = 0;
      this.getComment();
    },
    //获取评论内容
    getComment(index) {
      this.$Spin.show();
      getComments(this.artId, index)
        .then(result => {
          const arr = result.data.data; //评论数据
          this.count = result.data.count;
          this.$Spin.hide();
          if (arr.length < 5) {
            this.isMore = false;
          } else {
            this.isMore = true;
          }
          if (arr.length) {
            for (let i = 0; i < arr.length; i++) {
              const item = arr[i];
              this.commentArr.push(item);
            }
          }
        })
        .catch(err => {
          throw err;
        });
    },
    //获取更多评论
    getMore() {
      this.index += 5;
      this.getComment(this.index);
    }
  },
  watch: {
    $route(to, from) {
      this.getContent();
      this.start();
    }
  }
};
</script>
<style scoped>
.module {
  background-color: #fff;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}
#art-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  color: #333;
}
#content {
  min-height: 600px;
  font-size: 14px;
}
#other-info {
  line-height: 30px;
  font-size: 12px;
  color: #999;
  text-align: center;
}
.other-item {
  padding: 0 5px;
}
#num-box {
  text-align: center;
  padding: 10px 0;
}
#collect {
  display: inline-block;
  padding: 5px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #ed4014;
  box-shadow: 3px 4px 5px #ccc;
  border-radius: 20px;
  cursor: pointer;
}
.c-header {
  font-size: 16px;
  font-weight: bold;
  border-bottom: 2px solid;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}
#c-into {
  margin-top: 20px;
}
#send {
  font-size: 30px;
  text-align: right;
  margin-bottom: 20px;
}
.c-item {
  border-bottom: 1px dashed #ccc;
  padding: 20px 0;
}
.c-item-header {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
}
.user-name {
  font-size: 14px;
  padding: 0 5px;
  color: #ed4014;
}
.c-content {
  text-indent: 2em;
  font-size: 12px;
  color: #666;
}
#no-more {
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
@media screen and (max-width: 1200px) {
  #left-box {
    display: none;
  }
  #mobile-no {
    display: none;
  }
}
.ql-container,
.ql-snow {
  border: 0 !important;
}
</style>


